<template>
	<view>

		<view class="chat-main">
			<view class="chat-list">
				<view class="chat-items" v-for="(item, index) in resultList" :key="index">
					<view v-if="item.data">
						<view v-if="item.data.message">
							<view class="chat-item-left"
								v-if="item.data.message.direction===1 && item.data.message.senderUserId==targetId">

								<view class="chat-header">
									<text>{{resultList.date}}</text>
								</view>
								<view class="chat-content">
									<view class="usesr-avatar">
										<image :src="logo"></image>
										<text>{{item.name}}</text>
									</view>
									<view class="user-text">
										<text>{{item.data.message.text}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.data">
						<view v-if="item.data.message">
							<view class="chat-item-right"
								v-if="item.data.message.direction===0 && item.data.message.targetId==targetId">
								<view class="chat-header">
									<text>{{item.date}}</text>
								</view>
								<view class="chat-content">
									<view class="usesr-avatar">
										<image :src="userinfo.avatar"></image>
										<text>{{item.name}}</text>
									</view>
									<view class="user-text-right">
										<view class="user-text-right-box"></view>
										<text>{{item.data.message.text}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
		<view class="chat-botton">
			<view class="left-icon">
				<image src="https://image.hzwltb69.com/app/images/detailserver.png" @click="sendtoservcer"></image>
			</view>
			<view class="input-box">
				<input type="text" value="" v-model="words" placeholder="请输入发送的内容" />
			</view>
			<view class="right-icon">
				<!--	 <image src="/static/image/index/biaoqin.png"></image>
			<image src="/static/image/index/add.png"></image> -->
				<image src="https://image.hzwltb69.com/app/images/send.png" @click="sendPravte"></image>
				
				<!-- <button @click="sendPravte">发送</button>-->
			</view>
		</view>
	</view>
</template>

<script>
	import functionList from '../../function/index.js'
	import {
		resultList
	} from '../../util/common.js'
	import {
		statusColor,
		isObject,
		isArray
	} from '../../util/utils.js'
	import {
		addSuccessResult
	} from '../../util/common.js'
	const RCUniPush = uni.requireNativePlugin('RongCloud-Push-RCUniPush')
	export default {
		data() {
			return {
				title: 'Hello',
				resultList: resultList,
				statusColor: statusColor,
				// 方法列表
				functionList: functionList,
				curinitFormInfo: {},
				curconnectFormInfo: {},
				curFormVisible: false,
				sendTextMessage: {},
				sendImageMessage: {},
				getMessage: {},
				initlisten: {},
				Arr: [],
				words: '',
				name: '',
				img: '',
				storeId: "",
				logo: '',
				userinfo: uni.getStorageSync("userinfo"),
				targetId: "business",
				storename: "",
				destroy:{},
				disconnect:{},
				//targetId:'business114'
			};
		},
		// onHide() {
		// 	this.socket.emit('disconnection',this.$store.state.userInfo.username)
		// },
		onShow(e) {
			this.storeId = this.$Route.query.id;
			this.logo = this.$Route.query.logo;
			this.storename = this.$Route.query.name;
			this.targetId="business" + this.storeId
	 
			RCUniPush.setPushEventListener((data) => {
				addSuccessResult({
					title: '点击了推送',
					data
				})
			});
			let userinfo = uni.getStorageSync('userinfo')
			this.name = userinfo.name
		
			this.setTitleText()
			this.getMsg()
			this.curinitFormInfo = functionList[0].list[0];
			this.curconnectFormInfo = functionList[0].list[1];
			this.destroy = functionList[0].list[4];
			this.disconnect= functionList[0].list[2];
			this.sendTextMessage = functionList[2].list[0];
			this.getMessage = functionList[1].list[1];
			this.sendImageMessage = functionList[2].list[1];
			this.initlisten = functionList[0].list[3];
			

			this.runinitAction();
		},
		onHide(){
			const params = {};
			params["receivePush"] = false;
		 
		   this.disconnect.action && this.disconnect.action(params)
			this.destroy.action && this.destroy.action()
		},
		onUnload(){
			const params = {};
			params["receivePush"] = false;
		 
		 this.disconnect.action && this.disconnect.action(params)
			this.destroy.action && this.destroy.action()
		},

		methods: {
			setTitleText() {
				uni.setNavigationBarTitle({
					title: this.storename
				})
				
			},
			runinitAction() {
				const params = {};
				params["appKey"] = "x4vkb1qpxupek"
				this.curinitFormInfo.action && this.curinitFormInfo.action(params)
				
				this.runconnectAction();
			 

			},
			runconnectAction() {

				let that = this;
				let token = ""
				//uni.showLoading({})
				that.$http(
					'common.rongyun', {
						memberId: uni.getStorageSync("UId"),
						refresh: false
					},
				).then(res => {
					if (res.code == 200) {
						token = res.token;
						const params = {};
						params["token"] = token
						params["timeout"] = 0
						this.curconnectFormInfo.action && this.curconnectFormInfo.action(params)
					
						this.initlisten.action&&this.initlisten.action();
					}
				});
			},
			join: function() {
				this.socket.emit('join', this.name)
			},

			sendPravte: function() {
				if (this.words.length > 0) {
					//发送
					let message = {
						name: this.name,
						uid: 0,
						msg: this.words,
						data: getDate(),
						img: this.img,
						id: 2,
						userTo: '蕾姆'
					}
					this.Arr.push(message)
					//	this.socket.emit('private message', message)
					// let conversationType= 1;
					// let targetId= "business114";
					// let channelId= "";
					// let content= "安抚这是";
					// let pushContent= "";
					// let pushData=  "";
					// let mentionedType= "";
					// let userIdList= "";
					// let mentionedContent= "";
					// let keys= "";
					// let values= "";
					// let userId= "member1502";
					// let name="member1522202" ;
					// let portrait= 1;
					// let alias= "";
					// let extra= "";
					// let userExtra= "";
					let params = {};
					//console.info("business"+this.storeId)
					params["conversationType"] = 1
					params["targetId"] = "business"+this.storeId;
						 
					//params["targetId"] = "business114";
					params["channelId"] = ""
					params["content"] = this.words;
					params["pushContent"] = "";
					params["pushData"] = "";
					params["mentionedType"] = "";
					params["userIdList"] = "";
					params["mentionedContent"] = "";
					params["keys"] = "";
					params["values"] = "";
					params["userId"] = "";
					params["name"] = "";
					params["portrait"] = "";
					params["alias"] = "";
					params["extra"] = "";
					params["userExtra"] = "";

					this.sendTextMessage.action && this.sendTextMessage.action(params)
					this.words = ""
				}
			},
			send: function() {
				if (this.words.length > 0) {
					//发送
					let message = {
						name: this.name,
						uid: 0,
						msg: this.words,
						data: getDate(),
						img: this.img,
						id: 2
					}
					this.Arr.push(message)
					this.socket.emit('message', message)
					this.words = ''
				}
			},
			getMsg: function() {},
			sendtoservcer(){
				this.$Router.push({
					path: '/pages/kefu/pingtaikefu',
				 
				});
			},
		},

	};
</script>

<style lang="scss">
	.top-bar {
		padding-top: var(--status-bar-height);
		z-index: 1;
		position: fixed;
		width: 100%;
		display: flex;
		height: 88rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 0px 0px rgba($color: #8f8f8f, $alpha: 0.1);

		.top-bar-left {
			flex: 1;

			image {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}

		.top-bar-center {
			flex: 1;
			text-align: center;
		}

		.top-bar-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;

			.search {
				width: 88rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.add {
				height: 88rpx;
				width: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			image {
				width: 52rpx;
				height: 52rpx;
				border-radius: 52rpx;
			}
		}
	}

	.top-bar {
		background-color: rgba(244, 244, 244, 1);
	}

	page {
		background-color: rgba(244, 244, 244, 1);
	}

	.chat-main {

		.chat-list {
			display: flex;
			flex-direction: column;
			flex-wrap: warp;

			padding-bottom: 300rpx;

			.chat-item-left {
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;

				.chat-header {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 30rpx;

					text {
						font-size: 24rpx;
						color: #272832;
					}
				}

				.chat-content {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					.usesr-avatar {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}

						text {
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(39, 40, 50, 1);
						}
					}

					.user-image {
						image {
							width: 320rpx;
							height: 320rpx;
							border-radius: 40rpx;
							margin-left: 20rpx;
						}
					}

					.user-text {
						position: relative;
						margin-left: 50rpx;
						margin-right: 100rpx;
						background: rgba(255, 255, 255, 1);
						border-radius: 20rpx;
						padding: 20rpx;

						text {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(39, 40, 50, 1);
						}
					}

					.user-text:before {
						position: absolute;
						content: "\00a0";
						width: 0rpx;
						height: 0rpx;
						border-width: 16rpx 36rpx 16rpx 0;
						border-style: solid;
						border-color: transparent #FFFFFF transparent transparent;
						top: 30rpx;
						left: -36rpx;
					}
				}
			}

			.chat-item-right {
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;

				.chat-header {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 30rpx;

					text {
						font-size: 24rpx;
						color: #272832;
					}
				}

				.chat-content {
					display: flex;
					flex-direction: row-reverse;
					justify-content: flex-start;

					.usesr-avatar {
						padding: 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}

						text {
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(39, 40, 50, 1);
						}
					}

					.user-text-right {
						position: relative;
						display: flex;
						align-items: center;
						margin-left: 100rpx;
						margin-right: 50rpx;
						border-radius: 20rpx;
						padding: 20rpx;
						color: #000;
						background: #fedeb9;

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							line-height: 30rpx;
						}

						.user-text-right-box {
							position: absolute;
							display: inline-block;
							top: 30rpx;
							width: 0rpx;
							height: 0rpx;
							border-width: 16rpx 0rpx 16rpx 36rpx;
							right: -36rpx;
							border-style: solid;
							border-color: transparent transparent transparent #fedeb9;
							;
						}
					}
				}
			}
		}
	}

	.chat-botton {
		position: fixed;
		bottom: 10rpx;
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: center;
		height: 128rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);

		.left-icon {
			padding-left: 12rpx;
			padding-right: 12rpx;
			display: flex;
			align-items: center;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.input-box {
			input {
				width: 600rpx;
				height: 72rpx;
				background: #f7f7f7;
				border-radius: 10rpx;
			}
		}

		.right-icon {
			width: 188rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	.join-center {
		padding: 30rpx;
		display: flex;
		justify-content: center;

		text {
			font-size: 24rpx;
		}
	}
</style>
